{% extends "_base.html" %}
{% block sidebar %}
<ul>
  <li><a href="/">Home</a></li>
</ul>
{% endblock %}

{% block script %}
<script language="javascript"> 
    function toggle( label ) {
        var link = document.getElementById("link_"+label);
        var toggle = document.getElementById("toggle_"+label);
        var hid = document.getElementById("hidden_"+label);
        if(hid.value=="Deleted") {
            hid.value="Normal";
            toggle.innerHTML = "Delete";
            link.innerHTML=label;
        } else {
            hid.value="Deleted";
            toggle.innerHTML = "Restore";
            link.innerHTML="<del>"+label+"</del>";
        }
    } 
</script>
{% endblock %}

{% block content %}
<b>{{doorplate}}</b>
<ul>
    <form method="post" action="/">
        <input type="hidden" name="doorplate" value={{doorplate}}>
        <li>New label: <input type="text" name="newlabel" ></li>
        <table>
            {% for l in list %}
            <tr>
                <input type="hidden" id='hidden_{{l}}' name='hidden_{{l}}' value='Normal'>
                <td><li><a id='link_{{l}}' href="/cell?doorplate={{doorplate}}&label={{l}}">{{l}}</a></li></td>
                <td><a id='toggle_{{l}}' class="delbutton" href="javascript:toggle('{{l}}');">Delete</a></td>
            </tr>
            {% endfor %}
        </table>
        <input type="submit" name="b1" value="Update" >
    </form>
</ul>
{% endblock %}
{% block errmessage %}
<p>{{e}}</p>
{% endblock %}
{% block message %}
<p>{{m}}</p>
{% endblock %}
